<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="company-edit-wrap right-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/companyEdit' }">我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>基础信息</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div class="title">
                    公司状态：<span>{{info.coreData&&info.coreData.auditStatusDesc}}</span>
                    <!-- <span v-if="info.coreData&&info.coreData.auditStatus == 'pass'">审核通过，{{info.coreData&&info.coreData.companyBase&&info.coreData.companyBase.canFinancing=='y'?'已进行融资初审':'未融资初审'}}</span> -->
                    <!-- <span v-if="info.coreData&&info.coreData.auditStatus != 'pass'">{{info.coreData&&info.coreData.auditStatus=='init'?'待审核':'已审核'}}</span> -->
                </div>
                <div class="info-edit">
                    <div class="edit-title">基础信息 <div @click="()=>{this.editState = false}"  v-if="editState" class="edit-btn">编辑</div></div>
                    <el-form :model="information" :rules="rules" ref="information" >
                        <el-form-item prop="companyName">
                            <div class="edit-list ">
                                <div class="name">企业名称：</div>
                                <div v-if="!editState" class="edit-value input">
                                    <el-input v-model="information.companyName" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="name-value" v-if="editState">{{information.companyName}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="fundBody">
                            <div class="edit-list">
                                <div class="name">推荐机构类型：</div>
                                <div v-if="!editState" class="edit-value">
                                    <el-select v-model="information.fundBody" clearable placeholder="请选择">
                                        <el-option
                                        v-for="item in bodyArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div v-if="editState" class="name-value" >{{info.channelBaseData?returnType(info.channelBaseData.fundBody):''}}</div>
                            </div>  
                        </el-form-item>
                        <el-form-item prop="regdate">
                            <div class="edit-list">
                                <div class="name">注册成立日期：</div>
                                <div v-if="!editState" class="edit-value input">
                                <el-date-picker
                                    v-model="information.regdate"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div>
                                <div class="name-value" v-if="editState">{{information.regdate?information.regdate.split(' ')[0]:''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="masterName">
                            <div class="edit-list ">
                                <div class="name">推荐机构法人代表：</div>
                                <div v-if="!editState" class="edit-value input">
                                    <el-input v-model="information.masterName" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="name-value" v-if="editState">{{info.channelBaseData&&info.channelBaseData.masterName?info.channelBaseData.masterName:''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="regMoney">
                            <div class="edit-list ">
                                <div class="name">推荐机构注册资本：</div>
                                <div v-if="!editState" class="edit-value input">
                                    <el-input class="regMoney-input" v-model="information.regMoney" placeholder="请输入内容"></el-input>元
                                </div>
                                <div class="name-value" v-if="editState">{{info.channelBaseData&&info.channelBaseData.regMoney?info.channelBaseData.regMoney+'元':''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="contactName">
                            <div class="edit-list ">
                                <div class="name">推荐机构联系人：</div>
                                <div v-if="!editState" class="edit-value input">
                                    <el-input v-model="information.contactName" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="name-value" v-if="editState">{{info.channelBaseData&&info.channelBaseData.contactName?info.channelBaseData.contactName:''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="contactPhone">
                            <div class="edit-list ">
                                <div class="name">联系方式：</div>
                                <div v-if="!editState" class="edit-value input">
                                    <el-input v-model="information.contactPhone" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="name-value" v-if="editState">{{info.channelBaseData&&info.channelBaseData.contactPhone ?info.channelBaseData.contactPhone :''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="provinceCode">
                            <div class="edit-list address ">
                                <div class="name">推荐机构联系地址：</div>
                                <div v-if="!editState" class="edit-value">
                                    <el-select v-model="information.provinceCode"  @change="provinceChange" clearable placeholder="请选择">
                                        <el-option
                                        v-for="item in addressArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="information.cityCode" @change="cityChange" clearable placeholder="请选择">
                                    <el-option
                                        v-for="item in cityArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="information.districtCode" clearable placeholder="请选择">
                                        <el-option
                                        v-for="item in districtArr"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                        </el-option>
                                    </el-select>
                                    <el-input class="address-detail" v-model="information.address"></el-input>
                                </div>
                                <div v-if="editState" class="name-value" >{{info.channelBaseData&&info.channelBaseData.provinceName?info.channelBaseData.provinceName:''}}{{info.channelBaseData&&info.channelBaseData.cityName?'-'+info.channelBaseData.cityName:''}}{{info.channelBaseData&&info.channelBaseData.districtName?'-'+info.channelBaseData.districtName:''}}{{info.channelBaseData&&info.channelBaseData.address?'-'+info.channelBaseData.address:''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="memo">
                            <div class="edit-list">
                                <div class="name">推荐机构介绍：</div>
                                <div v-if="!editState" class="edit-value input">
                                <el-input
                                        type="textarea"
                                        :rows="5"
                                        placeholder="请输入内容"
                                        v-model="information.memo">
                                        </el-input>
                                </div>
                                <div class="name-value" v-if="editState">{{info.channelBaseData&&info.channelBaseData.memo ?info.channelBaseData.memo :''}}</div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="licenceId">
                            <div class="edit-list image">
                                <div class="name">营业执照复印件：</div>
                                <div v-if="!editState" class="edit-value">
                                    <div class="add-image">
                                        <el-upload  list-type="picture-card" class="normal-uploader" 
                                            :class="{uploadShow:uploadShow}"
                                            :action="upLoadUrl"    
                                            :on-success="handleFileSuccess"   
                                            :file-list='fileShowList'
                                            :limit='10'
                                            :on-remove="handleRemove">   
                                            <i class="el-icon-plus"></i> 
                                        </el-upload>  
                                    </div>
                                </div>
                                <div  v-if="editState" class="edit-img">
                                    <img :src="info.licenceData&&info.licenceData.licenceFileInfo?info.licenceData.licenceFileInfo.fileUrl:''" alt="">
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item prop="unifiedCreditNumber">
                            <div class="edit-list">
                                <div class="name">社会统一信用号：</div>
                                <div v-if="!editState" class="edit-value input">
                                    <el-input v-model="information.unifiedCreditNumber" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="name-value" v-if="editState">{{information.unifiedCreditNumber}}</div>
                            </div>  
                        </el-form-item>
                    </el-form> 
                    <div class="edit-list chanel">
                        <div class="name">推荐机构码：</div>
                        <div class="edit-value text">{{info.coreData&&info.coreData.channelCode}}</div>
                    </div>     
                </div>
                <div  v-if="!editState" @click="submitBtn('information')" class="btn-submit">提交</div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  name: 'menulist',
  data(){
    var validateCode =  (rule, value, callback) => {
        if (!common.checkSocialCreditCode(value)) return callback(new Error('社会统一信用号输入不合法'))
        return callback();
    };
    var validateNum =  (rule, value, callback) => { 
        if (isNaN(value)){ return callback(new Error('请输入数字')); }
        var reg= /^(-?\d+)(\.\d{1,2})?$/
        if (!reg.test(value)){ return callback(new Error('请保留两位小数')); }
        callback();
    };
    
    return{
      href:'',
      info:'',
      state:'',
      editState:true,
      fileShowList:[],
      information:{
          companyName:'',
          fundBody:'',
          address:'',
          regdate:'',
          provinceCode:'',
          cityCode:'',
          districtCode:"",
          memo:'',
          unifiedCreditNumber :'',
          licenceId:'',
          masterName:'',
          regMoney:'',
          contactName:'',
          contactPhone:''
      },
      uploadShow:false,
      upLoadUrl:'',
      addressArr:[],
      cityArr:[],
      districtArr:[],
      cityArr1:[],
      districtArr1:[],
      cityArr2:[],
      districtArr2:[],
      channelArr:[],
      bodyArr:[],
      rules:{
        //   companyName: [
        //     { required: true, message: '请输入企业名称', trigger: 'blur' }
        //   ],
        //   fundBody: [
        //     { required: true, message: '请选择推荐机构类型', trigger: 'blur' }
        //   ],
        //   regdate: [
        //     { required: true, message: '请输入注册成立日期', trigger: 'blur' }
        //   ],
        //   masterName: [
        //     { required: true, message: '请输入推荐机构法人代表', trigger: 'blur' }
        //   ],
        //   regMoney: [
        //     { required: true, message: '请输入推荐机构注册资本', trigger: 'blur' },
        //     {  validator: validateNum, trigger: 'blur' }
        //   ],
        //   contactName: [
        //     { required: true, message: '请输入推荐机构联系人', trigger: 'blur' }
        //   ],
        //   contactPhone: [
        //     { required: true, message: '请输入联系方式', trigger: 'blur' }
        //   ],
        //   provinceCode: [
        //     { required: true, message: '请选择推荐机构联系地址', trigger: 'blur' }
        //   ],
        //   memo: [
        //     { required: true, message: '请输入推荐机构介绍', trigger: 'blur' }
        //   ],
        //   unifiedCreditNumber: [
        //     { required: true, message: '请输入社会统一信用号', trigger: 'blur' },
        //     {  validator: validateCode, trigger: 'blur' }
        //   ],
        //  licenceId: [
        //     { required: true, message: '请上传营业执照复印件', trigger: 'blur' }
        //  ],
      },
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  mounted(){
       this.state = common.getCookie('userType')
    let sessionId = common.getCookie('sessionId');
        this.upLoadUrl =CONSTANT.URL.BASE.ADMINUPLOAD+ '?sessionId='+sessionId;  
        this.getDetail()
        this.getBody()
  },    
  methods:{
      returnType(id){
          let str;
          this.bodyArr.map((item)=>{
              if(item.key == id){
                  str = item.value
              }
          })
          return str;
      },
      getDetail(){
            let  url =CONSTANT.URL.WEB.FINDUSERBASEDETAILBYID,
                data = {},
                dataForm = {
                    userId:''
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.info= res.data.bussData;
                    let data = res.data.bussData;
                    // if()
                    
                    this.information = {
                        companyName:data.coreData.companyName,
                        regdate:data.coreData.regdate,
                        provinceCode:data.channelBaseData?data.channelBaseData.provinceCode:'' ,
                        cityCode:data.channelBaseData?data.channelBaseData.cityCode:'',
                        districtCode:data.channelBaseData?data.channelBaseData.districtCode:'',
                        licenceId:data.licenceData?data.licenceData.licenceFileId:'',
                        unifiedCreditNumber:data.licenceData?data.licenceData.unifiedCreditNumber:'',
                        licenceFileId:data.licenceData?data.licenceData.runRegAddress:'',
                        memo:data.channelBaseData?data.channelBaseData.memo:'',
                        address:data.channelBaseData?data.channelBaseData.address:'',
                        fundBody:data.channelBaseData?data.channelBaseData.fundBody:'',
                        masterName:data.channelBaseData?data.channelBaseData.masterName:'',
                        regMoney:data.channelBaseData?data.channelBaseData.regMoney:'',
                        contactName:data.channelBaseData?data.channelBaseData.contactName:'',
                        contactPhone:data.channelBaseData?data.channelBaseData.contactPhone:'',
                    }
                    if(data.licenceData){
                        this.fileShowList.push({
                            url:data.licenceData.licenceFileInfo.fileUrl
                        })
                    }
                     this.getProvince()
                }else{
                
                }
            })
        },
        submitBtn(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let  url = CONSTANT.URL.SYSTEM.SAVEUSERBASEDETAIL,
                        data = {
                            "coreData": {
                                "companyName":this.information.companyName ,
                                "userType": 'channel',
                                "regdate": this.information.regdate,
                            },
                            "licenceData": {
                                "unifiedCreditNumber":  this.information.unifiedCreditNumber,
                                'licenceFileId':this.information.licenceId
                            },
                            'channelBaseData':{
                                'address':this.information.address,
                                'fundBody':this.information.fundBody,
                                "cityCode": this.information.cityCode,
                                "districtCode": this.information.districtCode,
                                "provinceCode": this.information.provinceCode,
                                "memo":this.information.memo,
                                "masterName":this.information.masterName,
                                "regMoney":this.information.regMoney,
                                "contactName":this.information.contactName,
                                "contactPhone":this.information.contactPhone,
                            }
                        
                        },
                        dataForm = {}
                        common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                        if(res.status == 200){
                            this.$message({
                                message: '保存成功！',
                                type: 'success'
                            });
                            this.getDetail()
                            this.editState = true
                        }else{
                            this.$message.error(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
            
        },
        getProvince(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'province'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.addressArr= res.data.bussData
                    this.addressArr.map((item)=>{
                        if(!this.information.provinceCode) return
                        if(this.information.provinceCode == item.key){
                            this.cityArr = item.childs
                            if(!this.information.cityCode) return
                            item.childs.map((list)=>{
                                if(this.information.cityCode == list.key){
                                    this.districtArr = list.childs
                                }
                            })
                        }
                    })
                }else{
                    
                }
            })
        },
        provinceChange(e){
            this.information.regCityCode = ''
            this.cityArr = [];
            this.districtArr = []
            this.information.regDistrictCode = ''
            this.addressArr.map((item)=>{
                if(e== item.key){
                    this.cityArr = item.childs
                }
            })
        },
        cityChange(e){
            this.districtArr = []
            this.information.regDistrictCode = ''
            this.cityArr.map((item)=>{
                if(e == item.key){
                    this.districtArr = item.childs
                }
            })
        },
        provinceChange1(e){
            this.information.regCityCode1 = ''
            this.cityArr1 = [];
            this.districtArr1 = []
            this.information.regDistrictCode1 = ''
            this.addressArr.map((item)=>{
                if(e== item.key){
                    this.cityArr1 = item.childs
                }
            })
        },
        cityChange1(e){
            this.districtArr1 = []
            this.information.regDistrictCode1 = ''
            this.cityArr1.map((item)=>{
                if(e == item.key){
                    this.districtArr1 = item.childs
                }
            })
        },
        provinceChange2(e){
            this.information.regCityCode2 = ''
            this.cityArr2 = [];
            this.districtArr2 = []
            this.information.regDistrictCode2 = ''
            this.addressArr.map((item)=>{
                if(e== item.key){
                    this.cityArr2 = item.childs
                }
            })
        },
        cityChange2(e){
            this.districtArr2 = []
            this.information.regDistrictCode2 = ''
            this.cityArr2.map((item)=>{
                if(e == item.key){
                    this.districtArr2 = item.childs
                }
            })
        },
        firstChange(e){
            this.information.secondIndustry = ''
            this.thirdArr = [];
            this.secondArr = []
            this.information.thirdIndustry = ''
            this.industryArr.map((item)=>{
                if(e== item.key){
                    this.secondArr = item.childs
                }
            })
        },
        secondChange(e){
            this.thirdArr = []
            this.information.thirdIndustry = ''
            this.secondArr.map((item)=>{
                if(e == item.key){
                    this.thirdArr = item.childs
                }
            })
        },
        getBody(){
            let  url = CONSTANT.URL.BASE.DICTIONARY,
                data = {},
                dataForm = {codeType:'channel_type'}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    this.bodyArr= res.data.bussData
                }else{
                
                }
            })
        },
        handleRemove(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            this.uploadShow = false;
            this.information.licenceId = '';
        },       
        handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.information.licenceId = picItem.fileId;
                this.uploadShow = true;
            }
        },
  }
}
</script>

<style  lang="scss">

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.uploadShow  .el-upload{display: none;}
.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.company-edit-wrap{
  padding-top: 29px;
  .el-form-item{
      margin-bottom: 0PX;
  }
  .el-form-item__error {
    top: 71%;
    left: 14%;
}
  .el-input__inner{
      padding-left: 13px;
  }
  .wrap{
    background-color: #f5f5f5;
    .el-input__inner{
        border:1px solid #e1e1e1;
    }
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .title{
        height: 56px;
        line-height: 56px;
        border-bottom: 1px solid #D1D1D1;
        color: #666;
        font-size: 16px;
        span{
            color: #111;
            // font-weight: bold;
        }
      }
      .btn-submit{
            margin: 50px 0 0 30%;
            width: 200px;
            height: 40px;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            background-color: #ED7018;
            font-size: 24px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            }
        }
      .info-edit{
          padding-top: 31px;
          .edit-title{
              position: relative;
              font-size: 16px;
              color: #333;
              font-weight: bold;
              padding-left: 16px;
              margin-bottom: 28px;
                .edit-btn{
                    display: inline-block;
                    float: right;
                    width: 80px;
                    height: 30px;
                    margin-right: 20px;
                    background-color: #ED7018;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    font-size: 14px;
                    color: #fff;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                    &:hover{
                        background-color: #ED9000;
                        transition:all .2s linear
                    } 
                }
              &:after{
                  content: '';
                  position: absolute;
                  left: 0;
                  top: 2px;
                  width: 3px;
                  height: 17px;
                  background-color: #ED7018;
              }
          }
          .edit-list{
              overflow: hidden;
              margin-bottom: 24px;
              .name{
                  float: left;
                  width: 12%;
                  text-align: right;
                  font-size: 14px;
                  color: #666;
                  margin-right: 15px;
                  height: 40px;
                  line-height: 40px;
              }

              .name-value{
                  float: left;
                  width: 80%;
                  text-align: left;
                  font-size: 14px;
                  color: #666;
                  margin-right: 15px;
                  height: 40px;
                  line-height: 40px;
              }

            .regMoney-input{
                width: 350px;
                margin-right: 20px;
            }
              
            .address-detail{
                display: block;
                width: 384px;
                margin-top: 20px;
            }

                .edit-img{
                    
                    img{
                        width: 306px;
                        height: 227px;
                        border: 0;
                    }
                }

              &.line{
                .el-select{
                  margin-right: 10px;
                  width: 185px;
                  margin-right: 10px;
                }
              }
              &.image{
                 .edit-value{
                     float: none;
                     .add-image{
                         margin-left: 170px;
                         margin-top: 50px;
                     }
                 } 
              }
              &.address{
                .el-select{
                  margin-right: 16px;
                  width: 115px;
                }
              }
              &.chanel{
                 .el-select{
                  width: 384px;
                } 
              }
              &.register{
                .el-select{
                  margin-right: 10px;
                  width: 87px;
                }
                .address-input{
                    width: 422px;
                }
              }
  
              &.introduce{
                  margin-bottom: 0;
                  .title-item{
                      overflow: hidden;
                      font-size: 14px;
                      color: #666;
                      height: 40px;
                      line-height: 40px;
                      .title-list{
                          float: left;
                          width: 87px;
                          margin-right: 10px;
                      }
                  }
                .el-input{
                    margin-right: 10px;
                    width: 87px;
                }
                .address-input{
                    display: inline-block;
                }
                .address-input{
                    width: 422px;
                   
                }
              }
              .edit-value{
                  position: relative;
                  float: left;
                  font-size: 14px;
                  color: #333;
                  .el-textarea{
                      margin-top: 10px;
                  }
                  .el-icon-plus{
                    width: 306px;
                    height: 227px;
                    background: url(../../../images/photo.png);
                    background-size: 100%;
                    &:before{
                        content: ''
                    }
                  }
                  .btn-add{
                        position: absolute;
                        right: -80px;
                        width: 73px;
                        height: 40px;
                        bottom: 25px;
                        // margin-left: 41px;
                        // margin-top: 30px;
                        background-color: #ED7018;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        font-size: 14px;
                        color: #fff;
                        text-align: center;
                        line-height: 40px;
                        cursor: pointer;
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear
                        } 
                    }
                  .el-upload--picture-card{
                    width: 306px;
                    height: 227px;
                    border: 0;
                  }
                  .el-upload-list__item{
                      width: 306px;
                    height: 227px;
                  }
                 
                  &.text{
                    height: 40px;
                    line-height: 40px;
                  }
                  &.input{
                       width: 384px;
                        .el-date-editor{
                            width: 384px;
                            input{
                                padding-left: 30px;
                            }
                         }
                  }
                  .add-image{
                      width: 306px;
                      height: 227px;
                  }
              }
          }
      }
    }
  }
}

a{
  text-decoration: none;
}
</style>